<script setup>
import ArrowIcon from '../svgComponents/ArrowIcon.vue'
import LfBadge from './LfBadge.vue'
import { ref, onMounted, onUnmounted, watch, nextTick, defineExpose } from 'vue'

const props = defineProps({
  activeIndex: Number,
  onTopicClick: Function,
  tabOptions: Array,
  size: String,
  isEdit: Boolean
})

const outerRef = ref(null)
const innerRef = ref(null)

// 添加一个响应式变量来存储尺寸
const dimensions = ref({
  outerWidth: 0,
  innerWidth: 0,
})

// 添加一个响应式变量来存储滚动位置
const scrollPosition = ref(0)

// 添加滚动步长常量
const SCROLL_STEP = 300

// 创建一个更新尺寸的方法
const updateDimensions = () => {
  if (outerRef.value && innerRef.value) {
    dimensions.value = {
      outerWidth: outerRef.value.clientWidth,
      innerWidth: innerRef.value.clientWidth,
    }
  }
}

// 处理上一页点击
const handlePrevClick = () => {
  if (innerRef.value) {
    const currentScroll = innerRef.value.scrollLeft
    const newScroll = currentScroll - SCROLL_STEP

    innerRef.value.scrollTo({
      left: newScroll,
      behavior: 'smooth',
    })
  }
}

// 处理下一页点击
const handleNextClick = () => {
  if (innerRef.value) {
    const currentScroll = innerRef.value.scrollLeft
    const newScroll = currentScroll + SCROLL_STEP

    innerRef.value.scrollTo({
      left: newScroll,
      behavior: 'smooth', // 平滑滚动
    })
  }
}
const scrollLeftFn = (scrollLeft) => {
  if (innerRef.value) {
    innerRef.value.scrollTo({
      left: scrollLeft,
      // behavior: 'smooth', // 平滑滚动
    })
  }
}

// 处理滚动事件
const handleScroll = () => {
  if (innerRef.value) {
    scrollPosition.value = innerRef.value.scrollLeft
  }
}

// 修改显示上一页按钮的计算属性
const showPrevButton = computed(() => {
  return scrollPosition.value > 0
})

// 修改 showNextButton 计算属性
const showNextButton = computed(() => {
  return (
    dimensions.value.outerWidth &&
    dimensions.value.innerWidth &&
    dimensions.value.outerWidth <= dimensions.value.innerWidth + 5
  )

  // if (!innerRef.value) return false
  // const hasMoreContent = dimensions.value.outerWidth <= dimensions.value.innerWidth + 5
  // const notAtEnd = innerRef.value.scrollLeft + dimensions.value.outerWidth < dimensions.value.innerWidth
  // return hasMoreContent && notAtEnd
})

onMounted(() => {
  // 初始更新
  updateDimensions()

  // 添加滚动事件监听
  if (innerRef.value) {
    innerRef.value.addEventListener('scroll', handleScroll)
  }

  // 添加 ResizeObserver 来监听尺寸变化
  const observer = new ResizeObserver(() => {
    updateDimensions()
  })

  if (outerRef.value && innerRef.value) {
    observer.observe(outerRef.value)
    observer.observe(innerRef.value)
  }

  // 在组件卸载时清理
  onUnmounted(() => {
    if (innerRef.value) {
      innerRef.value.removeEventListener('scroll', handleScroll)
    }
    observer.disconnect()
  })
})

// 监听 tabOptions 变化
watch(
  () => props.tabOptions,
  () => {
    // 在下一个 DOM 更新周期执行
    nextTick(() => {
      updateDimensions()
    })
  },
  { deep: true },
)

defineExpose({
  scrollLeftFn
})
</script>

<template>
  <div class="flex items-center w-full">
    <div
      v-if="showPrevButton"
      @click="handlePrevClick"
      class="items-center px-2 cursor-pointer hover:bg-[--fill-2] rounded-full w-[45px] h-[45px] flex-cc flex-shrink-0">
      <ArrowIcon direction="left" />
    </div>

    <div ref="outerRef" class="flex border-b-1 w-full justify-between items-start">
      <div ref="innerRef" class="flex overflow-x-auto">
        <div v-for="(option, index) in tabOptions" class="hover:bg-[--fill-1]">
          <LfBadge :count="option.badge">
            <div
              :key="option.id"
              @click="onTopicClick(index, option.id, option.name,innerRef.scrollLeft)"
              class="p-3 px-5 hover:bg-[--fill-1] cursor-pointer border-[#2e5592] font-medium whitespace-nowrap relative"
              :class="{
                'border-b-2 cur': activeIndex === index,
                'text-sm': size === 'sm',
                'p-1': size === 'sm',
                'px-3': size === 'sm',
                'none-event': isEdit,
                'disable-active':isEdit
              }">
              {{ option.name }}
            </div>
          </LfBadge>
        </div>
      </div>

      <!-- 右侧插槽 -->
      <slot name="right" />
    </div>

    <div
      v-if="showNextButton"
      @click="handleNextClick"
      class="items-center px-2 cursor-pointer hover:bg-[--fill-2] rounded-full w-[45px] h-[45px] flex-cc flex-shrink-0">
      <ArrowIcon direction="right" />
    </div>

  </div>
</template>

<style scoped lang="scss">
.overflow-x-auto {
  /* 隐藏滚动条 - Webkit 浏览器 */
  &::-webkit-scrollbar {
    display: none;
  }

  /* 隐藏滚动条 - Firefox */
  scrollbar-width: none;

  /* 隐藏滚动条 - IE/Edge */
  -ms-overflow-style: none;
}
.none-event {
  pointer-events: none;
}
.disable-active {
  color: #ccc;
}
.cur {
  color: #000;

}
</style>
